<template>
  <view class="arrow-layout">
    <view class="arrow-wrapper" v-if="true">
      <view class="button">
        <view class="arrow" @click="switchArrow" :class="{'off': is}">
          <u-icon class="icon" color="#ffffff" size="24px" name="arrow-right" v-if="is"></u-icon>
          <u-icon class="icon" color="#ffffff" :size="size" name="arrow-left" :class="[!is ? 'active' + active : '']" v-else></u-icon>
        </view>
        <transition name="list">
          <div class="text" v-if="is">
            <view @click="clickText('/index')">首页</view>
            <view class="line">|</view>
            <view @click="clickText('/category')">分类</view>
            <view class="line">|</view>
            <view @click="clickText('/cart')">购物车</view>
            <view class="line">|</view>
            <view @click="clickText('/center')">我的</view>
          </div>
        </transition>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      is: false,
      active: 1,
      size: '24px'
    }
  },
  methods: {
    switchArrow() {
      this.is = !this.is
    },
    clickText (url) {
      uni.switchTab({
        url: `/pages${url}/index`
      })
    },
    change () {
      setTimeout(() => {
        this.active++
        if (this.active > 10) {
          this.active = 1
        }
        // if (this.active === 1) {
        //   this.size = '10px'
        // } else {
        //   this.size = '30px'
        // }
        this.change()
      }, 500)
    }
  },
  created() {
    this.change()
  }
}
</script>

<style scoped lang="scss">
// 定义颜色
$bg-color: $main_color;
$bg-color-off: rgba(0, 0, 0, .3);
$text-color: white;

.arrow-layout {
  .arrow-wrapper {
    position: fixed;
    // 这里可以调整位置
    bottom: 100px;
    right: 20px;
    z-index: 50;
    .button {
      width: 40px;
      height: 40px;
      line-height: 40px;
      position: relative;
      .arrow {
        background: $bg-color-off;
        border-radius: 50%;
        box-shadow: 1px 1px 2px #999;
        height: 40px;
        width: 40px;
        overflow: hidden;
        position: relative;
        display: flex;
        justify-content: center;
        .icon {
          position: absolute;
          //font-size: 24px;
          //color: $text-color;
          transition: all 0.3s linear;
          left: 7px;
          top: 7px;
          /* #ifdef H5 */
          left: 12px;
          /* #endif */
          &.active-1 {
            font-size: 10px;
            opacity: 0.5;
            left: 15px;
          }
          &.active-2, &.active-3, &.active-4, &.active-5,
          &.active-6, &.active-7, &.active-8, &.active-9 {
            font-size: 30px;
            opacity: 1;
            left: 5px;
          }
          &.active-10 {
            font-size: 30px;
            opacity: 0;
            left: -30px;
          }
        }
        &.off {
          background: $bg-color;
          .icon {
            &.active-2, &.active-3, &.active-4, &.active-5,
            &.active-6, &.active-7, &.active-8, &.active-9,
            &.active-1, &.active-10 {
              font-size: 24px;
              opacity: 1;
              left: 10px;
            }
          }
        }
      }
    }
    .text {
      padding: 10px;
      position: absolute;
      border-radius: 5px;
      left: -250px;
      bottom: -5px;
      width: 220px;
      height: 30px;
      line-height: 30px;
      background: $bg-color;
      box-shadow: 3px 3px 5px #999;
      display: flex;
      justify-content: space-around;
      color: $text-color;
      font-weight: 700;
      font-size: 16px;
      transition: all 0.2s linear;
    }
    .list-transition {
      opacity: 1;
    }
    .list-enter, .list-leave {
      opacity: 0;
      &.text {
        left: 0;
        bottom: -5px;
      }
    }
  }
}
</style>
